import {
  Box,
  Button,
  Card,
  CardBody,
  CardHeader,
  Heading,
  Stack,
  Text,
  Wrap,
  WrapItem,
} from '@chakra-ui/react';

const brands = ['All', 'Apple', 'Samsung', 'Huawei', 'Xiaomi'];
const categories = ['All', 'Smart Phone', 'Laptop', 'Accessory'];

const TagGroup = ({ label, items }: { label: string; items: string[] }) => (
  <Box>
    <Text fontWeight="600" mb={2}>
      {label}
    </Text>
    <Wrap spacing={2}>
      {items.map((item) => (
        <WrapItem key={item}>
          <Button
            size="sm"
            borderRadius="full"
            variant={item === 'All' ? 'solid' : 'outline'}
            colorScheme="brand"
          >
            {item}
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  </Box>
);

const FilterPanel = () => (
  <Card variant="outline" borderRadius="2xl" borderColor="gray.200">
    <CardHeader borderBottom="1px solid" borderColor="gray.100">
      <Heading size="sm">Filters</Heading>
    </CardHeader>
    <CardBody>
      <Stack spacing={6}>
        <TagGroup label="Brand" items={brands} />
        <TagGroup label="Category" items={categories} />
      </Stack>
    </CardBody>
  </Card>
);

export default FilterPanel;
